<template>
  <div class="container">
      <a-page-header
          title="个人信息页面"
        />
      <!-- 系统用户管理，查看用户列表，审核激活注册信息 -->
     <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        style="width:80%;margin:auto"
        @submit="handleSubmit"
      >
      <!-- 用户账户地址，不可编辑 -->
      <a-form-item>
        <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;账户地址：
        <a-input
        disabled
          v-decorator="[
            'accountAddr',
          ]"
          placeholder="用户账户地址"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <!-- 用户名,不可更改 -->
      <a-form-item>
        <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;用户名：
        <a-input
          disabled
          v-decorator="[
            'username',
          ]"
          placeholder="Username"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <!-- 用户电话 -->
      <a-form-item>
        <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;用户电话：
        <a-input
          v-decorator="[
            'telephone',
            { rules: [{ required: true, message: 'Please input your telephone!' }] },
          ]"
          placeholder="电话号码"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>

      <!-- 用户邮箱 -->
      <a-form-item>
        <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;用户邮箱：
        <a-input
          v-decorator="[
            'email',
            { rules: [{ required: true, message: 'Please input your email!' }] },
          ]"
          placeholder="用户邮箱"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>

      <!-- 用户身份证号 -->
      <a-form-item>
         <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;用户身份证号：
        <a-input
          v-decorator="[
            'identify',
            { rules: [{ required: true, message: 'Please input your email!' }] },
          ]"
          placeholder="用户身份证号"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <!-- 用户类型 -->
      <a-form-item>
         <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;用户身份：
         <span v-if="currentUser != null && currentUser._role != undefined">
           <a-tag color="orange">
            {{roleMap[currentUser._role]}}
          </a-tag>
           </span>
        <!-- <a-input
        disabled
          v-decorator="[
            'role',
            { rules: [{ required: true, message: 'Please input your email!' }] },
          ]"
          placeholder="用户角色"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input> -->
      </a-form-item>
      <!-- 用户状态 -->
      <a-form-item>
          <a-icon type="user" style="color: rgba(0,0,0,.25)" />&nbsp;&nbsp;&nbsp;&nbsp;账户状态：
          <span>
            <a-tag color="green" v-if="currentUser.active == true">
              已激活
            </a-tag>
            <a-tag color="red" v-if="currentUser.active != true">
              未激活
            </a-tag>
           </span>
      </a-form-item>

      <!-- 更新用户信息 -->
      <a-button type="primary" html-type="submit" class="login-form-button">
        更新信息
      </a-button>
      &nbsp;&nbsp;&nbsp;
      <!-- <a-button type="primary" html-type="submit" class="login-form-button">
        申请激活
      </a-button> -->
    </a-form>
  </div>
</template>

<script>
import {updatePersonInfo} from "@/api/user/user"

export default {
    data(){
        return {
            currentUser: null,
            roleMap: {
              'SYS_ADMIN':'系统管理员',
              'DOCTOR': "医生",
              "CLIENT": "普通用户"
            }
        }
    },
    methods: {
      handleSubmit(){
        this.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
                values.active = this.currentUser.active
                values._role = this.currentUser._role
                updatePersonInfo(values).then(
                  data=>{
                    this.$message.success("信息更新完成");
                  }
                );
              }
        });
      }
    },
    beforeCreate(){
      this.form = this.$form.createForm(this, { name: 'person_info' });
    },
    created(){
      this.currentUser = JSON.parse(localStorage.getItem("currentLoginUser"));
      console.log("currentUser", this.currentUser)
    },
    mounted(){
      // 设置用户新表单值
      this.form.setFieldsValue({
              username: this.currentUser.username,
              accountAddr: this.currentUser.accountAddr,
              telephone: this.currentUser.telephone,
              email: this.currentUser.email,
              identify: this.currentUser.identify == undefined ? "" : this.currentUser.identify,
              active: this.currentUser.active
              // doctor: this.currentUser.username,
            }); 
    }
}
</script>

<style lang="less" scoped>
.container{
    margin: auto;
    width: 90%;
    min-height: 700px;
    // margin-top: 30px;
    margin-bottom: 30px;
    background-color: aliceblue;

}

.table-container{
    min-height: 700px;
}

.condition-container{
  width: 100%;
  min-height: 80px;
  background-color: antiquewhite;
  margin-bottom: 10px;
  padding: 5px;
}

.title{
  font-size: 20px;
  font-weight: bold;
}

.condition-btn-group{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>